<template>
  <div>
    <!--头部logo-->
    <div id="header">
      <!-- 头部logo -->
      <div class="topBar">
        <!-- 头部logo -->
        <h1 class="logo">
          <router-link to="/home" title="中原工学院大学生社团联合会">
            <img style="height: 71px" src="@/assets/images/logo/logo03.png"/>
          </router-link>
          <div class="logo-title">欢迎注册</div>
          <div class="have-account">已有账号？
            <router-link style="float: right" to="/login">请登录></router-link>
          </div>
        </h1>
      </div>
    </div>
    <div id="redister_root" style="font-size: 14px;">
      <!--      <div class="header">
              <div class="logo-con clearfix" style="width: 1210px;margin: 0 auto">
                <router-link to="/home" title="中原工学院大学生社团联合会">
                  <img class="logo" src="@/assets/images/logo/logo02.png" alt="中原工学院大学生社团联合会">
                </router-link>
                <div class="logo-title">欢迎注册</div>
                <div class="have-account">已有账号？
                  <router-link to="/login">请登录></router-link>
                </div>
              </div>
            </div>-->

      <!--主要内容-->
      <div class="container" style="width: 1210px;margin: 0 auto">
        <div class="main ">
          <div class="reg-form">
            <div id="step2-wrap">
              <!--用户名-->
              <div class="form-item"
                   :class="[showErrorCLass['1']?'show-error':'']"
                   :style="{'border-color':showColor1?'rgb(102, 102, 102)':'','z-index':showColor1?'13':''}"
              >
                <label>用　户　名</label>
                <input type="text" v-model="registerForm.userName" class="field"
                       autocomplete="off" name="userName"
                       @focus="focusInput(1)"
                       @blur="blurInput(1,registerForm.userName)"
                       @input="inputWatch(1,registerForm.userName)"
                       maxlength="20" placeholder="您的账户名和登录名"
                >
                <i v-if="successImg.show1" style="display: block; background-position: 0 -117px;" class="i-status"></i>
                <i v-else class="i-cancel" @click="clearBtn(1)"
                   :style="{'display':registerForm.userName!=''?'block':''}"
                ></i>
              </div>
              <div class="input-tip">
                <span v-if="defClass['1']">
                  <i class="i-def"></i>{{ msgValue.msg1 }}
                </span>
                <span class="error" v-if="errorClass['1']">
                  <i class="i-error"></i>{{ msgValue.msg1 }}
                </span>
              </div>

              <!--昵称-->
              <div class="form-item"
                   :class="[showErrorCLass['2']?'show-error':'']"
                   :style="{'border-color':showColor2?'rgb(102, 102, 102)':'','z-index':showColor2?'13':''}"
              >
                <label>昵　&nbsp;&nbsp; 　称</label>
                <input type="text" v-model="registerForm.nickName" class="field"
                       autocomplete="off"
                       maxlength="20" placeholder="您的登录昵称"
                       @focus="focusInput(2)"
                       @blur="blurInput(2,registerForm.nickName)"
                       @input="inputWatch(2,registerForm.nickName)"
                >
                <i v-if="successImg.show2" style="display: block; background-position: 0 -117px;" class="i-status"></i>
                <i v-else class="i-cancel" @click="clearBtn(2)"
                   :style="{'display':registerForm.nickName!=''?'block':''}"
                ></i>
              </div>
              <div class="input-tip">
                <span v-if="defClass['2']">
                  <i class="i-def"></i>{{ msgValue.msg2 }}
                </span>
                <span class="error" v-if="errorClass['2']">
                  <i class="i-error"></i>{{ msgValue.msg2 }}
                </span>
              </div>

              <!--手机号-->
              <div class="form-item"
                   :class="[showErrorCLass['3']?'show-error':'']"
                   :style="{'border-color':showColor3?'rgb(102, 102, 102)':'','z-index':showColor3?'13':''}"
              >
                <label>手　机　号</label>
                <input type="number" class="field" autocomplete="off"
                       maxlength="11" placeholder="建议使用常用手机号"
                       oninput="if(value.length > 11)value=value.slice(0,11)"
                       v-model="registerForm.phonenumber"
                       @focus="focusInput(3)"
                       @blur="blurInput(3,registerForm.phonenumber)"
                       @input="inputWatch(3,registerForm.phonenumber)"
                >
                <i v-if="successImg.show3" style="display: block; background-position: 0 -117px;" class="i-status"></i>
                <i v-else class="i-cancel" @click="clearBtn(3)"
                   :style="{'display':registerForm.phonenumber!=''?'block':''}"
                ></i>
              </div>
              <div class="input-tip">
                <span v-if="defClass['3']">
                  <i class="i-def"></i>{{ msgValue.msg3 }}
                </span>
                <span class="error" v-if="errorClass['3']">
                  <i class="i-error"></i>{{ msgValue.msg3 }}
                </span>
              </div>


              <!--设置密码-->
              <div class="form-item"
                   :class="[showErrorCLass['4']?'show-error':'']"
                   :style="{'border-color':showColor4?'rgb(102, 102, 102)':'','z-index':showColor4?'13':''}"
              >
                <label>设 置 密 码</label>
                <input autocomplete="off" type="password" class="field" name="password"
                       maxlength="20" placeholder="建议使用两种或两种以上字符组合"
                       v-model="registerForm.password"
                       @focus="focusInput(4)"
                       @blur="blurInput(4,registerForm.password)"
                       @input="inputWatch(4,registerForm.password)"
                >
                <i v-if="successImg.show4" style="display: block; background-position: 0 -117px;" class="i-status"></i>
                <i v-else class="i-cancel" @click="clearBtn(4)"
                   :style="{'display':registerForm.password!=''?'block':''}"
                ></i>
              </div>
              <div class="input-tip">
                <span v-if="defClass['4']">
                  <i class="i-def"></i>{{ msgValue.msg4 }}
                </span>
                <span class="error" v-if="errorClass['4']">
                  <i class="i-error"></i>{{ msgValue.msg4 }}
                </span>
                <span v-if="qrClass['2']">
                  <i class="i-pwd-weak"></i>{{ msgValue.msg4 }}
                </span>
                <span v-if="qrClass['3']">
                  <i class="i-pwd-medium"></i>{{ msgValue.msg4 }}
                </span>
                <span v-if="qrClass['4']">
                  <i class="i-pwd-strong"></i>{{ msgValue.msg4 }}
                </span>
              </div>

              <!--确认密码-->
              <div class="form-item"
                   :class="[showErrorCLass['5']?'show-error':'']"
                   :style="{'border-color':showColor5?'rgb(102, 102, 102)':'','z-index':showColor5?'13':''}"
              >
                <label>确 认 密 码</label>
                <input v-model="password2" type="password" class="field"
                       placeholder="请再次输入密码"
                       @focus="focusInput(5)"
                       @blur="blurInput(5,password2)"
                       @input="inputWatch(5,password2)"
                >
                <i v-if="successImg.show5" style="display: block; background-position: 0 -117px;" class="i-status"></i>
                <i v-else class="i-cancel" @click="clearBtn(5)"
                   :style="{'display':password2!=''?'block':''}"
                ></i>
              </div>
              <div class="input-tip">
                <span v-if="defClass['5']">
                  <i class="i-def"></i>{{ msgValue.msg5 }}
                </span>
                <span class="error" v-if="errorClass['5']">
                  <i class="i-error"></i>{{ msgValue.msg5 }}
                </span>
              </div>

              <!--验证码-->
              <div class="form-item"
                   :class="[showErrorCLass['6']?'show-error':'']"
                   :style="{'border-color':showColor6?'rgb(102, 102, 102)':'','z-index':showColor6?'13':''}"
              >
                <label>验　证　码</label>
                <input style="width: 161px" type="text" class="field"
                       v-model="registerForm.code" placeholder="验证码"
                       @input="inputWatch(6,registerForm.code)"
                       @focus="focusInput(6)"
                       @blur="blurInput(6,registerForm.code)"
                >
                <img style="position: absolute;height: 52px;width: 110px;" :src="codeUrl" @click="getCode"
                     class="verify-code"
                />
              </div>
              <div class="input-tip">
                <span v-if="defClass['6']">
                  <i class="i-def"></i>{{ msgValue.msg6 }}
                </span>
                <span class="error" v-if="errorClass['6']">
                  <i class="i-error"></i>{{ msgValue.msg6 }}
                </span>
              </div>

              <!--立即注册-->
              <div>
                <button class="btn-register2" @click="isClick">立即注册</button>
              </div>
            </div>
          </div>
          <div class="reg-other clearfix">
            <router-link to="/register/sponsor" class="reg-other-item reg-other-person">
              <i class="reg-ohter-icon"></i>赞助商用户注册
            </router-link>
          </div>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>

</template>

<script>
import Footer from '@/layout/components/Footer'
import { getCodeImg, Register, registerLogin } from '@/api/login'
import Cookies from 'js-cookie'
import { encrypt, decrypt } from '@/utils/jsencrypt'

export default {
  name: 'Common',
  components: { Footer },
  data() {
    return {
      showColor1: false,
      showColor2: false,
      showColor3: false,
      showColor4: false,
      showColor5: false,
      showColor6: false,
      // 表单参数
      registerForm: {
        userName: '',
        nickName: '',
        password: '',
        phonenumber: '',
        roleIds: [2],
        code: '',
        uuid: ''
      },
      password2: '',
      // 表单校验
      regs: {
        userNameReg: /^(([\u4e00-\u9fa5])|[a-zA-Z0-9-_]){4,20}$/,
        pwdReg: /^.{6,20}$/,
        phone: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
        numReg: /\d/,
        strReg: /[a-zA-Z]/,
        tsReg: /[^\u4e00-\u9fa5a-zA-Z0-9]/,
        reg1: /^[0-9]{5,}$/,
        reg2: /^[a-z]{5,}$/,
        reg3: /^[a-z0-9]{6,16}$/,
        reg4: /^[a-z0-9_]{6,16}$/,
        reg5: /\s/g,
        reg6: /^[a-z_]{6,16}$/,
        reg7: /^[0-9_]{6,16}$/
      },
      successImg: {
        show1: false,
        show2: false,
        show3: false,
        show4: false,
        show5: false
      },
      msgValue: {
        msg1: '支持中文、英文、数字、“-”、“_”的组合，4-20个字符',
        msg2: '支持中文、英文、数字、字符等的组合，4-20个字符',
        msg3: '请输入11数字的手机号码',
        msg4: '建议使用字母、数字和符号两种及以上的组合，6-20个字符',
        msg5: '请再次输入密码',
        msg6: '请输入验证码结果'
      },
      defClass: {
        1: false,
        2: false,
        3: false,
        4: false,
        5: false,
        6: false
      },
      errorClass: {
        1: false,
        2: false,
        3: false,
        4: false,
        5: false,
        6: false
      },
      qrClass: {
        1: false,
        2: false,
        3: false,
        4: false
      },
      showErrorCLass: {
        1: false,
        2: false,
        3: false,
        4: false,
        5: false,
        6: false
      },
      codeUrl: '',
      redirect: undefined
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  created() {
    this.getCode()
  },
  methods: {
    //获取验证码
    getCode() {
      getCodeImg().then(res => {
        this.codeUrl = 'data:image/gif;base64,' + res.img
        this.registerForm.uuid = res.uuid
      })
    },
    //确认注册
    isClick() {
      this.showColor1 = this.showColor2 = this.showColor3 = this.showColor4 = this.showColor5=this.showColor6 = false
      this.defClass = {
        1: false,
        2: false,
        3: false,
        4: false,
        5: false,
        6: false
      }
      this.showErrorCLass = {
        1: false,
        2: false,
        3: false,
        4: false,
        5: false,
        6: false
      }
      if (!this.successImg.show1 || !this.successImg.show2 || !this.successImg.show3 || !this.successImg.show4 || !this.successImg.show5) {
        if (this.registerForm.userName == '') {
          this.errorClass['1'] = this.showErrorCLass['1'] = true
          this.msgValue.msg1 = '用户名不能为空'
        } else if (this.registerForm.userName.length < 4 || this.registerForm.userName.length > 20) {
          this.showErrorCLass['1'] = this.errorClass['1'] = true
          this.msgValue.msg1 = '长度应在4-20个字符之间'
        } else if (!this.regs.userNameReg.test(this.registerForm.userName)) {
          this.showErrorCLass['1'] = true
          this.errorClass['1'] = true
          this.msgValue.msg1 = '格式错误，仅支持汉字、字母、数字、“-”、“_”的组合'
        } else if ('注册失败，账号已存在' == this.msgValue.msg1) {
          this.showErrorCLass['1'] = true
          this.errorClass['1'] = true
          this.msgValue.msg1 = '注册失败，账号已存在'
        } else {
          this.showErrorCLass['1'] = false
          this.errorClass['1'] = false
        }
        if (this.registerForm.nickName == '') {
          this.showErrorCLass['2'] = true
          this.errorClass['2'] = true
          this.msgValue.msg2 = '昵称不能为空'
        } else if (this.registerForm.nickName.length < 1 || this.registerForm.nickName.length > 20) {
          this.showErrorCLass['2'] = true
          this.errorClass['2'] = true
          this.msgValue.msg2 = '长度应在1-20个字符之间'
        } else {
          this.showErrorCLass['2'] = false
          this.errorClass['2'] = false
        }
        if (this.registerForm.phonenumber == '') {
          this.showErrorCLass['3'] = true
          this.errorClass['3'] = true
          this.msgValue.msg3 = '手机号码不能为空'
        } else if (!this.regs.phone.test(this.registerForm.phonenumber) || this.registerForm.phonenumber.length != 11) {
          this.showErrorCLass['3'] = true
          this.errorClass['3'] = true
          this.msgValue.msg3 = '格式错误，仅支持11位有效数字的手机号码'
        } else if (this.msgValue.msg3 == '注册失败，手机号码已存在') {
          this.showErrorCLass['3'] = true
          this.errorClass['3'] = true
          this.msgValue.msg3 = '注册失败，手机号码已存在'
        } else {
          this.showErrorCLass['3'] = false
          this.errorClass['3'] = false
        }
        if (this.registerForm.password == '') {
          this.showErrorCLass['4'] = true
          this.qrClass['2'] = false
          this.qrClass['3'] = false
          this.qrClass['4'] = false
          this.errorClass['4'] = true
          this.msgValue.msg4 = '密码不能为空'
        } else if (this.registerForm.password.length < 6 || this.registerForm.password.length > 20) {
          this.showErrorCLass['4'] = true
          this.showErrorCLass['4'] = true
          this.qrClass['2'] = false
          this.qrClass['3'] = false
          this.qrClass['4'] = false
          this.errorClass['4'] = true
          this.msgValue.msg4 = '密码长度应在6-20个字符之间'
        } else if (this.regs.reg5.test(this.registerForm.password)) {
          this.showErrorCLass['4'] = true
          this.qrClass['2'] = false
          this.qrClass['3'] = false
          this.qrClass['4'] = false
          this.errorClass['4'] = true
          this.msgValue.msg4 = '登录密码仅支持字母、数字或字符，不可包含空格'
        } else {
          this.showErrorCLass['4'] = false
          this.errorClass['4'] = false
        }
        if (this.password2 != this.registerForm.password) {
          this.showErrorCLass['5'] = true
          this.errorClass['5'] = true
          this.msgValue.msg5 = '您两次输入的密码不同，请重试'
        } else {
          this.showErrorCLass['5'] = false
          this.errorClass['5'] = false
        }
        if (!this.registerForm.code){
          this.errorClass['6'] = this.showErrorCLass['6'] = true
          this.msgValue.msg6 = '验证码不能为空'
        }
        return
      }
      if (!this.registerForm.code){
        this.errorClass['6'] = this.showErrorCLass['6'] = true
        this.msgValue.msg6 = '验证码不能为空'
        return
      }
      Register(this.registerForm).then(res => {
        if (res.code === 500) {
          if (res.msg=='验证码已失效'){
            this.showErrorCLass['6'] = true
            this.errorClass['6'] = true
            this.msgValue.msg6 = res.msg
            this.getCode();
          }else if(res.msg=='验证码错误'){
            this.showErrorCLass['6'] = true
            this.errorClass['6'] = true
            this.msgValue.msg6 = res.msg
            this.getCode();
          }else if (res.msg == '注册失败，账号已存在') {
            this.showErrorCLass['1'] = true
            this.successImg.show1 = false
            this.errorClass['1'] = true
            this.msgValue.msg1 = res.msg
          } else if (res.msg == '注册失败，手机号码已存在') {
            this.showErrorCLass['3'] = true
            this.successImg.show3 = false
            this.errorClass['3'] = true
            this.msgValue.msg3 = res.msg
          }
          return
        }
        if (res.code === 200) {
          let loginForm = {
            username: this.registerForm.userName || this.registerForm.phonenumber,
            password: this.registerForm.password
          }
          registerLogin(loginForm).then(res => {
            this.$store.dispatch('Login', res)
            this.msgSuccess('注册成功，以为你登录成功')
            this.$router.push({ path: this.redirect || '/' }).catch(() => {
            })
          })
        } else {
          this.msgSuccess('未知错误，注册失败，请稍后重试！')
        }

      })
    },
    //监控输入框
    inputWatch(e, val) {
      if (e == 1) {
        this.defClass['1'] = false
        this.successImg.show1 = false
        this.showErrorCLass['1'] = false
        if (val == '') {
          this.errorClass['1'] = true
          this.showErrorCLass['1'] = true
          this.msgValue.msg1 = '用户名不能为空'
        } else if (val.length < 4 || val.length > 20) {
          this.errorClass['1'] = true
          this.showErrorCLass['1'] = true
          this.msgValue.msg1 = '长度应在4-20个字符之间'
        } else if (!this.regs.userNameReg.test(val)) {
          this.errorClass['1'] = true
          this.showErrorCLass['1'] = true
          this.msgValue.msg1 = '格式错误，仅支持汉字、字母、数字、“-”、“_”的组合'
        } else {
          this.showErrorCLass['1'] = false
          this.errorClass['1'] = false
          this.successImg.show1 = true
        }
      } else if (e == 2) {
        this.defClass['2'] = false
        this.successImg.show2 = false
        this.showErrorCLass['2'] = false
        if (val == '') {
          this.showErrorCLass['2'] = true
          this.errorClass['2'] = true
          this.msgValue.msg2 = '昵称不能为空'
        } else if (val.length < 1 || val.length > 20) {
          this.showErrorCLass['2'] = true
          this.errorClass['2'] = true
          this.msgValue.msg2 = '长度应在1-20个字符之间'
        } else {
          this.showErrorCLass['2'] = false
          this.errorClass['2'] = false
          this.successImg.show2 = true
        }
      } else if (e == 3) {
        this.defClass['3'] = false
        this.successImg.show3 = false
        this.showErrorCLass['3'] = false
        if (val == '') {
          this.showErrorCLass['3'] = true
          this.errorClass['3'] = true
          this.msgValue.msg3 = '手机号码不能为空'
        } else if (!this.regs.phone.test(val) || val.length != 11) {
          this.showErrorCLass['3'] = true
          this.errorClass['3'] = true
          this.msgValue.msg3 = '格式错误，仅支持11位有效数字的手机号码'
        } else {
          this.showErrorCLass['3'] = false
          this.errorClass['3'] = false
          this.successImg.show3 = true
        }
      } else if (e == 4) {
        this.defClass['4'] = false
        this.successImg.show4 = false
        this.showErrorCLass['4'] = false
        if (val == '') {
          this.showErrorCLass['4'] = true
          this.qrClass['2'] = false
          this.qrClass['3'] = false
          this.qrClass['4'] = false
          this.errorClass['4'] = true
          this.msgValue.msg4 = '密码不能为空'
        } else if (val.length < 6 || val.length > 16) {
          this.showErrorCLass['4'] = true
          this.qrClass['2'] = false
          this.qrClass['3'] = false
          this.qrClass['4'] = false
          this.errorClass['4'] = true
          this.msgValue.msg4 = '密码长度应在6-16个字符之间'
        } else if (this.regs.reg5.test(val)) {
          this.showErrorCLass['4'] = true
          this.qrClass['2'] = false
          this.qrClass['3'] = false
          this.qrClass['4'] = false
          this.errorClass['4'] = true
          this.msgValue.msg4 = '登录密码仅支持字母、数字或字符，不可包含空格'
        } else if (this.regs.reg1.test(val) || this.regs.reg2.test(val)) {
          this.showErrorCLass['4'] = false
          this.errorClass['4'] = false
          this.qrClass['3'] = false
          this.qrClass['4'] = false
          this.successImg.show4 = true
          this.errorClass['4'] = false
          this.qrClass['2'] = true
          this.msgValue.msg4 = '有被盗风险,建议使用字母、数字和符号两种及以上组合'
        } else if (this.regs.reg6.test(val) || this.regs.reg3.test(val) || this.regs.reg7.test(val)) {
          this.showErrorCLass['4'] = false
          this.errorClass['4'] = false
          this.qrClass['2'] = false
          this.qrClass['4'] = false
          this.successImg.show4 = true
          this.errorClass['4'] = false
          this.qrClass['3'] = true
          this.msgValue.msg4 = '安全强度适中，可以使用三种以上的组合来提高安全强度'
        } else if (this.regs.reg4.test(val)) {
          this.showErrorCLass['4'] = false
          this.errorClass['4'] = false
          this.qrClass['2'] = false
          this.qrClass['3'] = false
          this.successImg.show4 = true
          this.errorClass['4'] = false
          this.qrClass['4'] = true
          this.msgValue.msg4 = '你的密码很安全'
        } else {
          this.showErrorCLass['4'] = false
          this.errorClass['4'] = false
          this.qrClass['2'] = false
          this.qrClass['3'] = false
          this.msgValue.msg4 = '你的密码很安全'
          this.errorClass['4'] = false
          this.qrClass['4'] = true
          this.successImg.show4 = true
        }
      } else if (e == 5) {
        this.successImg.show5 = false
        this.defClass['5'] = false
        this.showErrorCLass['5'] = false
        if (val != this.registerForm.password) {
          this.showErrorCLass['5'] = true
          this.errorClass['5'] = true
          this.msgValue.msg5 = '您两次输入的密码不同，请重试'
        } else {
          this.showErrorCLass['5'] = false
          this.errorClass['5'] = false
          this.successImg.show5 = true
        }
      }
    },
    //获取焦点
    focusInput(e) {
      if (e == 1) {
        this.successImg.show1 = false
        this.defClass['1'] = true
        this.errorClass['1'] = false
        this.msgValue.msg1 = '支持中文、英文、数字、“-”、“_”的组合，4-20个字符'
        this.showColor1 = true
      } else if (e == 2) {
        this.successImg.show2 = false
        this.defClass['2'] = true
        this.errorClass['2'] = false
        this.msgValue.msg2 = '支持中文、英文、数字、字符等的组合，1-20个字符'
        this.showColor2 = true
      } else if (e == 3) {
        this.successImg.show3 = false
        this.defClass['3'] = true
        this.errorClass['3'] = false
        this.msgValue.msg3 = '请输入11数字的手机号码'
        this.showColor3 = true
      } else if (e == 4) {
        this.successImg.show4 = false
        this.defClass['4'] = true
        this.errorClass['4'] = false
        this.qrClass['2'] = false
        this.qrClass['3'] = false
        this.qrClass['4'] = false
        this.msgValue.msg4 = '建议使用字母、数字和符号两种及以上的组合，6-20个字符'
        this.showColor4 = true
      } else if (e == 5) {
        this.successImg.show5 = false
        this.defClass['5'] = true
        this.errorClass['5'] = false
        this.msgValue.msg5 = '请再次输入密码'
        this.showColor5 = true
      } else if (e == 6) {
        this.defClass['6'] = true
        this.errorClass['6'] = false
        this.msgValue.msg6 = '请输入验证码结果'
        this.showColor6 = true
      } else {
        this.defClass = {
          1: false,
          2: false,
          3: false,
          4: false,
          5: false,
          6: false
        }
      }
    },
    //失去焦点
    blurInput(e, val) {
      if (e == 1) {
        this.defClass['1'] = false
        if (val == '') {
          this.showErrorCLass['1'] = true
          this.errorClass['1'] = true
          this.msgValue.msg1 = '用户名不能为空'
        } else if (val.length < 4 || val.length > 20) {
          this.showErrorCLass['1'] = true
          this.errorClass['1'] = true
          this.msgValue.msg1 = '长度应在4-20个字符之间'
        } else if (!this.regs.userNameReg.test(val)) {
          this.showErrorCLass['1'] = true
          this.errorClass['1'] = true
          this.msgValue.msg1 = '格式错误，仅支持汉字、字母、数字、“-”、“_”的组合'
        } else {
          this.showErrorCLass['1'] = false
          this.errorClass['1'] = false
          this.successImg.show1 = true
        }
        this.showColor1 = false
      } else if (e == 2) {
        this.defClass['2'] = false
        if (val == '') {
          this.showErrorCLass['2'] = true
          this.errorClass['2'] = true
          this.msgValue.msg2 = '昵称不能为空'
        } else if (val.length < 1 || val.length > 20) {
          this.showErrorCLass['2'] = true
          this.errorClass['2'] = true
          this.msgValue.msg2 = '长度应在1-20个字符之间'
        } else {
          this.errorClass['2'] = this.showErrorCLass['2'] = false
          this.successImg.show2 = true
        }
        this.showColor2 = false
      } else if (e == 3) {
        this.defClass['3'] = false
        if (val == '') {
          this.showErrorCLass['3'] = true
          this.errorClass['3'] = true
          this.msgValue.msg3 = '手机号码不能为空'
        } else if (!this.regs.phone.test(val) || val.length != 11) {
          this.showErrorCLass['3'] = true
          this.errorClass['3'] = true
          this.msgValue.msg3 = '格式错误，仅支持11位有效数字的手机号码'
        } else {
          this.showErrorCLass['3'] = false
          this.errorClass['3'] = false
          this.successImg.show3 = true
        }
        this.showColor3 = false
      } else if (e == 4) {
        this.defClass['4'] = false
        if (val == '') {
          this.showErrorCLass['4'] = true
          this.errorClass['4'] = true
          this.msgValue.msg4 = '密码不能为空'
        } else if (val.length < 6 || val.length > 20) {
          this.showErrorCLass['4'] = true
          this.errorClass['4'] = true
          this.msgValue.msg4 = '密码长度应在6-20个字符之间'
        } else if (this.regs.reg5.test(val)) {
          this.showErrorCLass['4'] = true
          this.errorClass['4'] = true
          this.msgValue.msg4 = '登录密码仅支持字母、数字或字符，不可包含空格'
        } else if (this.regs.reg1.test(val) || this.regs.reg2.test(val)) {
          this.showErrorCLass['4'] = false
          this.successImg.show4 = true
          this.errorClass['4'] = false
          this.qrClass['2'] = true
          this.msgValue.msg4 = '有被盗风险,建议使用字母、数字和符号两种及以上组合'
        } else if (this.regs.reg6.test(val) || this.regs.reg3.test(val) || this.regs.reg7.test(val)) {
          this.showErrorCLass['4'] = false
          this.successImg.show4 = true
          this.errorClass['4'] = false
          this.qrClass['3'] = true
          this.msgValue.msg4 = '安全强度适中，可以使用三种以上的组合来提高安全强度'
        } else if (this.regs.reg4.test(val)) {
          this.showErrorCLass['4'] = false
          this.successImg.show4 = true
          this.errorClass['4'] = false
          this.qrClass['4'] = true
          this.msgValue.msg4 = '你的密码很安全'
        } else {
          this.showErrorCLass['4'] = false
          this.msgValue.msg4 = '你的密码很安全'
          this.errorClass['4'] = false
          this.qrClass['4'] = true
          this.successImg.show4 = true
        }
        this.showColor4 = false
      } else if (e == 5) {
        this.defClass['5'] = false
        if (val != this.registerForm.password) {
          this.showErrorCLass['5'] = true
          this.errorClass['5'] = true
          this.msgValue.msg5 = '您两次输入的密码不同，请重试'
        } else {
          this.showErrorCLass['5'] = false
          this.errorClass['5'] = false
          this.successImg.show5 = true
        }
        this.showColor5 = false
      } else if (e == 6) {
        this.defClass['6'] = false
        if (val == '') {
          this.errorClass['6'] = true
          this.showErrorCLass['6'] = true
          this.msgValue.msg6 = '验证码不能为空'
        } else {
          this.showErrorCLass['6'] = false
          this.errorClass['6'] = false
        }
        this.showColor6 = false
      } else {
      }
    },
    //颜色变换
    checkFocus(e) {
      if (e == 1) {
        this.showColor1 = true
      } else {
        this.showColor1 = false
      }
      if (e == 2) {
        this.showColor2 = true
      } else {
        this.showColor2 = false
      }
      if (e == 3) {
        this.showColor3 = true
      } else {
        this.showColor3 = false
      }
      if (e == 4) {
        this.showColor4 = true
      } else {
        this.showColor4 = false
      }
      if (e == 5) {
        this.showColor5 = true
      } else {
        this.showColor5 = false
      }
      if (e == 6) {
        this.showColor6 = true
      } else {
        this.showColor6 = false
      }
    },
    //清空数据
    clearBtn(e) {
      if (e == 1) {
        this.successImg.show1 = false
        this.registerForm.userName = ''
      }
      if (e == 2) {
        this.successImg.show2 = false
        this.registerForm.nickName = ''
      }
      if (e == 3) {
        this.successImg.show3 = false
        this.registerForm.phonenumber = ''
      }
      if (e == 4) {
        this.successImg.show4 = false
        this.registerForm.password = ''
      }
      if (e == 5) {
        this.successImg.show5 = false
        this.password2 = ''
      }
    }
  }
}
</script>
<style lang="scss" scoped>
#redister_root {
  .header .logo, .i-company, .i-def, .i-error, .i-error1, .i-global, .i-suc {
    background: url(../../assets/images/login/icon.png) no-repeat
  }

  .i-error {
    background-position: -17px -100px
  }

  .i-def {
    background-position: 0 -100px
  }

  .i-suc {
    background-position: 0 -117px
  }

  .i-company {
    background-position: 0 -50px
  }

  .i-global {
    background-position: -50px -50px
  }

  .i-error1 {
    background-position: -17px -117px
  }

  .header {
    height: 110px;
    background: url(../../assets/images/login/headbg.jpg) repeat-x left bottom
  }

  .header .logo {
    width: 160px;
    height: 50px;
    float: left;
    margin-top: 24px
  }

  .header .logo-title {
    float: left;
    height: 34px;
    line-height: 34px;
    font-size: 24px;
    color: #333;
    margin-top: 34px
  }

  .header .have-account {
    font-size: 16px;
    float: right;
    margin-top: 55px;
    color: #999
  }

  .header .have-account a {
    color: #e22
  }

  .header .have-account a:hover {
    color: #c81623;
    text-decoration: underline
  }

  /* user-reg/3.0.0 common.css Date:2018-12-06 19:04:37 */
  .feedback, .i-clear, .i-company, .i-def, .i-error, .i-error1, .i-global, .i-suc, .registerDialog .close, .registerDialog .ico {
    background: url(../../assets/images/login/icon.png) no-repeat
  }

  .i-error {
    background-position: -17px -100px
  }

  .i-def {
    background-position: 0 -100px
  }

  .i-suc {
    background-position: 0 -117px
  }

  .i-company {
    background-position: 0 -50px
  }

  .i-global {
    background-position: -50px -50px
  }

  .i-error1 {
    background-position: -17px -117px
  }

  button, input, select, textarea {
    outline: 0
  }

  textarea {
    font-size: 13px;
    resize: none
  }

  input::-ms-clear {
    display: none
  }

  input::-ms-reveal {
    width: 0;
    height: 0
  }

  .tips {
    position: absolute;
    background: #fef4e5;
    border: solid 1px #f6c090;
    color: #bc5212;
    display: none;
    padding: 0 12px;
    height: 32px;
    text-align: center;
    line-height: 32px;
    border-radius: 3px;
    z-index: 11
  }

  .tips .arrow {
    width: 0;
    height: 0;
    line-height: 0;
    font-size: 0;
    border-color: #f6c090 transparent transparent;
    border-style: solid dashed dashed;
    border-width: 8px;
    position: absolute;
    left: 50%;
    margin-left: -4px;
    bottom: -16px
  }

  .tips .arrow-inner {
    width: 0;
    height: 0;
    line-height: 0;
    font-size: 0;
    border-color: #fef4e5 transparent transparent;
    border-style: solid dashed dashed;
    border-width: 8px;
    position: absolute;
    left: 50%;
    margin-left: -4px;
    bottom: -15px
  }

  .capslock-tip {
    right: 2px;
    top: -45px
  }

  .feedback {
    display: block;
    width: 33px;
    height: 135px;
    background-position: -367px 0
  }

  .feedback:hover {
    background-position: -334px 0
  }

  .i-clear {
    width: 16px;
    height: 16px;
    position: absolute;
    right: 20px;
    top: 20px;
    background-position: -34px -100px;
    display: none;
    cursor: pointer
  }

  .reg-ad {
    width: 100%;
    height: 140px
  }

  .reg-ad a {
    width: 100%;
    display: block;
    height: 140px
  }

  .ui-dialog {
    box-shadow: 0 3px 10px #ccc
  }

  .registerDialog {
    background: #fff;
    text-align: center;
    padding: 30px 0
  }

  .registerDialog .con {
    font-size: 16px;
    color: #333;
    display: inline-block;
    vertical-align: middle;
    text-align: left;
    line-height: 22px
  }

  .registerDialog .ico {
    display: inline-block;
    width: 48px;
    height: 48px;
    background-position: -211px 0;
    vertical-align: middle;
    margin-right: 20px
  }

  .registerDialog .close {
    position: absolute;
    right: 10px;
    top: 10px;
    display: block;
    width: 16px;
    height: 16px;
    background-position: -51px -118px
  }

  .ui-mask {
    cursor: pointer
  }

  .ui-dialog-autoclose {
    display: none
  }

  .ui-dialog .ui-dialog-title {
    color: #000;
    font-weight: 700
  }

  .protocol-con {
    height: 426px;
    padding: 10px;
    line-height: 20px;
    overflow-x: hidden;
    overflow-y: auto;
    margin-bottom: 25px
  }

  .protocol-con h4, .protocol-con h5 {
    color: #333;
    font-size: 14px
  }

  .protocol-con h5 {
    margin: 10px 0
  }

  .protocol-button button {
    margin: 0 auto;
    display: block;
    width: 400px;
    height: 54px;
    color: #fff;
    background: #e22;
    border: 0;
    font-size: 16px;
    font-family: "Microsoft YaHei", "Hiragino Sans GB"
  }

  .en-register .user-suggest .disable .value span {
    width: 170px
  }

  .en-register .header .logo {
    background: url(../../assets/images/login/jdcloud-en-logo.png);
    background-size: contain;
    height: 43px
  }

  .en-register .form-agreen a {
    font-style: italic
  }

  .en-register .progress-bar {
    width: 420px;
    padding-left: 20px
  }

  .en-register .progress-bar .person-pro-line1 {
    left: 75px
  }

  .en-register .progress-bar .person-pro-step2 {
    margin-left: 100px
  }

  .en-register .progress-bar .person-pro-line2 {
    left: 244px
  }

  .en-register .progress-bar .person-pro-step3 {
    marigin-left: 110px
  }

  /* progress-bar.css Date:2018-04-24 21:00:12 */
  .i-company, .i-def, .i-error, .i-error1, .i-global, .i-suc {
    background: url(../../assets/images/login/icon.png) no-repeat
  }

  .progress-bar .pro-line, .progress-bar .pro-step .step-index {
    background: url(../../assets/images/login/reg-icon.png) no-repeat
  }

  .i-error {
    background-position: -17px -100px
  }

  .i-def {
    background-position: 0 -100px
  }

  .i-suc {
    background-position: 0 -117px
  }

  .i-company {
    background-position: 0 -50px
  }

  .i-global {
    background-position: -50px -50px
  }

  .i-error1 {
    background-position: -17px -117px
  }

  .progress-bar {
    position: relative;
    margin: 80px auto 0;
    width: 400px
  }

  .progress-bar .pro-step {
    float: left;
    text-align: center
  }

  .progress-bar .pro-step .step-index {
    margin: 0 auto;
    display: block;
    width: 24px;
    height: 24px;
    line-height: 24px;
    background-position: -45px -200px;
    font-size: 12px;
    font-weight: 700;
    color: #ccc
  }

  .progress-bar .pro-step .step-desc {
    margin-top: 10px;
    font-size: 12px;
    color: #999
  }

  .progress-bar .pro-step2 {
    margin-left: 49px
  }

  .progress-bar .person-pro-step2 {
    margin-left: 106px
  }

  .progress-bar .pro-step3 {
    margin-left: 43px
  }

  .progress-bar .person-pro-step3 {
    margin-left: 112px
  }

  .progress-bar .pro-step4 {
    margin-left: 51px
  }

  .progress-bar .cur-step .step-index {
    background-position: 0 -200px;
    color: #fff
  }

  .progress-bar .cur-step .step-desc {
    color: #3b4
  }

  .progress-bar .done-step .step-index {
    background-position: 0 0;
    border: none
  }

  .progress-bar .done-step .step-desc {
    color: #3b4
  }

  .progress-bar .pro-line {
    position: absolute;
    top: 7px;
    width: 74px;
    height: 10px;
    background-position: 0 -40px
  }

  .progress-bar .person-pro-line {
    width: 124px;
    background-position: 0 -100px
  }

  .progress-bar .pro-line1 {
    left: 50px
  }

  .progress-bar .person-pro-line1 {
    left: 55px
  }

  .progress-bar .pro-line2 {
    left: 169px
  }

  .progress-bar .person-pro-line2 {
    left: 228px
  }

  .progress-bar .pro-line3 {
    right: 42px
  }

  .progress-bar .cur-line {
    background-position: 0 -70px
  }

  .progress-bar .person-cur-line {
    background-position: 0 -130px
  }

  /* user-reg/3.0.0 reg-steps.css Date:2020-06-04 14:08:20 */
  .checkRegDialog .ico, .i-status, .i-company, .i-def, .i-error, .i-error1, .i-global, .i-info, .i-pwd-medium, .i-pwd-strong, .i-pwd-weak, .i-suc, .mobileRelationDialog .ico {
    background: url(../../assets/images/login/icon.png) no-repeat
  }

  .form-agreen .agree-tip i, .form-agreen .sim-checkbox, .form-item .i-cancel, .reg-other .reg-ohter-icon {
    background: url(../../assets/images/login/reg-icon.png) no-repeat
  }

  .i-error {
    background-position: -17px -100px
  }

  .i-def {
    background-position: 0 -100px
  }

  .i-suc {
    background-position: 0 -117px
  }

  .i-company {
    background-position: 0 -50px
  }

  .i-global {
    background-position: -50px -50px
  }

  .i-error1 {
    background-position: -17px -117px
  }

  .ui-dialog-content {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;
    user-select: none
  }

  body {
    font-size: 14px
  }

  .main {
    margin: 50px auto 60px;
    width: 400px
  }

  .mb230 {
    margin-bottom: 230px
  }

  .form-item {
    position: relative;
    border: solid 1px #ddd;
    width: 398px;
    height: 52px;
    z-index: 0
  }

  .form-item label {
    float: left;
    width: 87px;
    height: 50px;
    line-height: 50px;
    padding-left: 20px
  }

  .form-item txt {
    margin-top: 2px !important
  }

  .form-item .item-input-wrap {
    float: left;
    width: 288px;
    height: 50px;
    border: solid 1px #ddd
  }

  .form-item .field {
    border: 0 none;
    font-size: 14px;
    width: 190px;
    height: 19px;
    padding-bottom: 11px;
    padding-left: 20px;
    padding-top: 16px
  }

  .form-item .field::-webkit-input-placeholder {
    color: #ccc
  }

  .form-item .field:-moz-placeholder {
    color: #ccc
  }

  .form-item .field::-moz-placeholder {
    color: #ccc
  }

  .form-item .field:-ms-input-placeholder {
    color: #ccc
  }

  .form-item .field span {
    display: none
  }

  .form-item .form-authcode {
    width: 150px
  }

  .form-item .mailcode, .form-item .phonecode {
    width: 152px
  }

  .form-item .error {
    display: block
  }

  .form-item .i-status {
    position: absolute;
    display: none;
    width: 16px;
    height: 16px;
    top: 20px;
    right: 20px
  }

  .form-item .i-cancel {
    background-position: -80px -160px;
    position: absolute;
    display: none;
    width: 12px;
    height: 12px;
    top: 22px;
    right: 20px;
    cursor: pointer;
  }

  .form-item .img-code {
    position: absolute;
    right: 3px;
    top: 3px;
    width: 110px;
    height: 46px;
    cursor: pointer
  }

  .pwd-weak {
    border: solid 1px #e22
  }

  .pwd-medium {
    border: solid 1px #f91
  }

  .pwd-strong {
    border: solid 1px #90b71b
  }

  .i-info {
    background-position: -34px -117px
  }

  .i-pwd-weak {
    background-position: -17px -134px
  }

  .i-pwd-medium {
    background-position: -34px -117px
  }

  .i-pwd-strong {
    background-position: -34px -134px
  }

  .btn-mailcode, .btn-phonecode {
    float: left;
    width: 118px;
    height: 52px;
    border: 1px solid #ddd;
    border-left: none;
    background: #fff;
    color: #333;
    padding: 0
  }

  .btn-code-disable {
    background: #f4f5f6;
    color: #999;
    cursor: default
  }

  .form-item-getcode {
    line-height: 52px;
    text-align: center;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    z-index: 2
  }

  .form-item-getcode:hover {
    border-color: #666
  }

  .form-item-account {
    z-index: 13
  }

  .form-item-phone {
    border: none
  }

  .form-item-phone .select-country {
    border: solid 1px #ddd;
    border-right: none;
    padding: 0 0 0 20px;
    cursor: pointer;
    color: #666
  }

  .form-item-phone .arrow {
    background: url(../../assets/images/login/icon.png) no-repeat;
    width: 15px;
    height: 15px;
    display: inline-block;
    margin-top: 15px;
    margin-left: 5px;
    background-position: -2px -150px;
    *zoom: 1;
    *height: 20px
  }

  .form-item-phone .down {
    background-position: -18px -151px
  }

  .mailcode-left, .phonecode-left {
    position: relative;
    float: left;
    border: solid 1px #ddd
  }

  .form-agreen {
    position: relative;
    margin-bottom: 20px;
    color: #333;
    font-size: 12px;
    word-wrap: break-word;
    white-space: nowrap
  }

  .form-agreen input {
    display: none;
    width: 18px;
    height: 18px;
    border: solid 1px #cfd1d3;
    vertical-align: text-top;
    padding: 0;
    margin: 0
  }

  .form-agreen .sim-checkbox {
    background-position: -107px -156px;
    float: left;
    margin-right: 10px;
    width: 18px;
    height: 18px;
    border: 1px solid #ddd
  }

  .form-agreen .sim-checkbox.not-checked {
    background: 0 0
  }

  .form-agreen .agree-tip {
    display: none;
    position: absolute;
    height: 50px;
    line-height: 50px;
    padding: 0 20px;
    background: rgba(0, 0, 0, .8);
    color: #fff;
    bottom: 10px;
    left: 87px;
    text-align: center;
    font-size: 14px;
    z-index: 1000
  }

  .form-agreen .agree-tip i {
    display: inline-block;
    background-position: -40px 0;
    margin-right: 6px;
    width: 18px;
    height: 18px;
    vertical-align: middle
  }

  .form-agreen a {
    color: #06c
  }

  .form-agreen a:hover {
    color: #c81623;
    text-decoration: underline
  }

  .form-item-valid .i-status {
    display: block;
    background-position: 0 -117px;
  }

  .pending .i-status {
    background: url(../../assets/images/login/loading.gif);
    display: block
  }

  .phone-binded {
    border: solid 1px #f91
  }

  .input-tip {
    color: #c5c5c5;
    height: 27px;
    font-size: 12px;
    padding-top: 5px
  }

  .input-tip span i {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: text-top;
    margin-right: 8px
  }

  .input-tip .error, .input-tip .orange, .phone-bind-tip {
    color: #f91
  }

  .phone-bind-tip .i-info {
    background-position: -68px -100px
  }

  .phone-bind-tip a {
    color: #38f
  }

  .btn-register {
    width: 100%;
    height: 54px;
    line-height: 54px;
    text-align: center;
    color: #fff;
    background: #e2231a;
    border: 0;
    font-size: 16px;
    font-family: "Microsoft YaHei", "Hiragino Sans GB";
    cursor: pointer
  }

  .btn-register2 {
    width: 100%;
    height: 54px;
    line-height: 54px;
    text-align: center;
    color: #fff;
    background: #2a5caa;
    border: 0;
    font-size: 16px;
    font-family: "Microsoft YaHei", "Hiragino Sans GB";
    cursor: pointer
  }

  .btn-register2:hover {
    background: #224b8f
  }

  .btn-register2:active {
    background: #224b8f;
    color: #2387D7
  }

  .btn-register:hover {
    background: #c81623
  }

  .btn-register:active {
    background: #c81623;
    color: #eababc
  }

  .suggest-container {
    display: none
  }

  .suggest-container li {
    cursor: pointer
  }

  .suggest-container .disable {
    cursor: default
  }

  .user-suggest {
    position: absolute;
    left: -1px;
    display: block;
    width: 398px;
    border: solid 1px #f98;
    z-index: 10;
    top: 52px;
    border-bottom: 5px solid RGBA(221, 221, 221, .15)
  }

  .user-suggest li {
    height: 40px;
    line-height: 40px;
    color: #666;
    padding-left: 130px;
    background: #fdf2ef
  }

  .user-suggest .suggest-li-last {
    border-bottom: 1px solid #f98
  }

  .user-suggest .disable {
    color: #ee2223
  }

  .user-suggest .disable i {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    vertical-align: middle
  }

  .user-suggest .disable .value {
    overflow: hidden
  }

  .user-suggest .disable .value span {
    display: inline-block;
    vertical-align: middle;
    width: 150px
  }

  .user-suggest .current {
    background: #ffeae5
  }

  .phone-suggest {
    width: 145px;
    border-left: solid 1px #ccc;
    background: #fff;
    border-bottom: none;
    z-index: 11
  }

  .phone-suggest li {
    height: 40px;
    line-height: 40px;
    padding-left: 20px
  }

  .phone-suggest .current, .phone-suggest .selected {
    background: #f6f6f6
  }

  .email-suggest {
    position: absolute;
    border: solid 1px #ccc;
    z-index: 10;
    background: #fff;
    left: -1px;
    top: 52px;
    width: 100%
  }

  .email-suggest li {
    height: 40px;
    line-height: 40px;
    padding-left: 130px;
    color: #333;
    padding-right: 12px;
    text-align: right;
    text-indent: -1000px
  }

  .email-suggest li .value {
    overflow: hidden
  }

  .email-suggest .current {
    background: #f6f6f6
  }

  .ui-scrollbar-main {
    background-color: #fff
  }

  .ui-scrollbar-item {
    border: #ccc 1px solid;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    background: #ddd
  }

  .reg-other {
    margin-top: 28px
  }

  .reg-other .reg-ohter-icon {
    display: inline-block;
    margin: 0 8px 2px 0;
    vertical-align: middle;
    width: 26px;
    height: 26px;
    background-position: 0 -160px
  }

  .reg-other .reg-other-item {
    color: #333;
    cursor: pointer
  }

  .reg-other .reg-other-item:hover {
    color: #333
  }

  .reg-other .reg-other-person {
    float: left
  }

  .reg-other .reg-other-person:hover {
    color: #c81623
  }

  .reg-other .reg-other-inter {
    float: right
  }

  .reg-other .reg-other-inter:hover {
    color: #c81623
  }

  .reg-other .reg-other-inter .reg-ohter-icon {
    background-position: -40px -160px
  }

  .item-mailcode-wrap, .item-phonecode-wrap {
    display: none;
    height: 86px
  }

  .form-item-mailcode, .form-item-phonecode {
    border: none;
    z-index: 110;
    width: 402px
  }

  .form-item-mailcode label, .form-item-phonecode label {
    border: none
  }

  .form-item-mailcode .i-status, .form-item-phonecode .i-status {
    right: 125px;
    display: none
  }

  .form-item-mailcode .audio-tip, .form-item-phonecode .audio-tip {
    display: none;
    padding-top: 23px;
    text-align: right;
    font-size: 12px
  }

  .form-item-mailcode .audio-tip .get-auth-code, .form-item-phonecode .audio-tip .get-auth-code {
    color: #06c;
    cursor: pointer
  }

  .form-item-mailcode .audio-tip .get-auth-code:hover, .form-item-phonecode .audio-tip .get-auth-code:hover {
    text-decoration: underline
  }

  .form-item-authcode .i-status {
    right: 125px
  }

  .item-phone-wrap {
    height: 86px;
    position: relative;
    z-index: 2
  }

  .item-phone-wrap .orEmail {
    position: absolute;
    right: 0;
    bottom: 6px;
    font-size: 12px
  }

  .item-phone-wrap .orEmail a {
    color: #38f
  }

  .item-email-wrap {
    height: 86px;
    position: relative;
    z-index: 1000
  }

  .item-email-wrap .orPhone {
    position: absolute;
    right: 0;
    bottom: 6px;
    font-size: 12px
  }

  .item-email-wrap .orPhone a {
    color: #38f
  }

  .item-email-wrap .form-item {
    z-index: 11
  }

  .ignore-item {
    display: none
  }

  #form-equalTopwd, #form-pwd, #login-pwd {
    width: 210px
  }

  .noSelect {
    user-select: none;
    -o-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none
  }

  .jdpayServiceDialog, .jdpayServiceDialog .ui-dialog-content {
    overflow-x: hidden !important;
    overflow-y: auto !important
  }

  .ui-dialog-content-extra {
    overflow-y: scroll !important
  }

  .protocol-button-pay {
    padding: 25px 0;
    background-color: #fff
  }

  .jd-iframe iframe {
    height: 450px !important;
    overflow-x: hidden;
    overflow-y: auto
  }

  .checkRegDialog .ico {
    display: block;
    width: 50px;
    height: 50px;
    background-position: -279px -60px;
    vertical-align: middle;
    margin: 0 auto
  }

  .checkRegDialog .con {
    margin-top: 10px;
    text-align: center;
    font-size: 18px
  }

  .checkRegDialog .con em {
    font-weight: 700
  }

  .checkRegDialog .desc {
    margin-top: 10px;
    font-size: 14px;
    color: #999
  }

  .checkRegDialog .btn-wrap {
    margin-top: 18px;
    text-align: center
  }

  .checkRegDialog .btn-red, .checkRegDialog .btn-white {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    padding: 0 16px;
    height: 36px;
    line-height: 36px;
    font-size: 14px
  }

  .checkRegDialog .btn-red {
    margin-right: 10px;
    background-color: #e2231a;
    color: #fff
  }

  .checkRegDialog .btn-white {
    border: 1px solid #e2231a;
    color: #e2231a
  }

  .mobileRelationDialog .ico {
    display: block;
    width: 50px;
    height: 50px;
    background-position: -279px -60px;
    vertical-align: middle;
    margin: 0 auto
  }

  .mobileRelationDialog .con {
    margin-top: 10px;
    text-align: center;
    font-size: 16px;
    color: #666;
    line-height: 21px
  }

  .mobileRelationDialog .con em {
    font-weight: 700
  }

  .mobileRelationDialog .relations {
    width: 361px;
    margin: 20px auto;
    border-top: 1px solid #DDD;
    border-bottom: 1px solid #DDD;
    font-size: 14px;
    color: #999;
    padding: 14px 27px
  }

  .mobileRelationDialog .relations .pin {
    text-align: left;
    line-height: 40px
  }

  .mobileRelationDialog .relations .pin .middleImage {
    width: 28px;
    height: 28px;
    margin-right: 8px
  }

  .mobileRelationDialog .relations .canLogin {
    font-size: 14px;
    color: #06C;
    line-height: 36px;
    text-decoration: underline
  }

  .mobileRelationDialog .radio-group {
    text-align: left;
    line-height: 40px
  }

  .mobileRelationDialog .radio-group .lg-radio {
    margin-right: 18px
  }

  .mobileRelationDialog .radio-group .lg-radio .lg-radio-o {
    margin-right: 5px
  }

  .mobileRelationDialog .radio-group .lg-radio .lg-radio-label {
    font-size: 14px;
    color: #666;
    letter-spacing: 0
  }

  .mobileRelationDialog .warning {
    font-size: 12px;
    color: #999;
    text-align: left;
    line-height: 16px
  }

  .mobileRelationDialog .warning img {
    width: 13px;
    height: 13px;
    margin-right: 5px
  }

  .mobileRelationDialog .btn-wrap {
    margin-top: 18px;
    text-align: center
  }

  .mobileRelationDialog .btn-red, .mobileRelationDialog .btn-white {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    padding: 0 16px;
    height: 40px;
    line-height: 40px;
    font-size: 14px
  }

  .mobileRelationDialog .btn-red {
    margin-right: 10px;
    background-color: #E2231A;
    color: #fff
  }

  .mobileRelationDialog .btn-red.disabled {
    opacity: .5;
    cursor: not-allowed
  }

  .ui-dialog .ui-dialog-close {
    background: url(//misc.360buyimg.com/user/reg/3.0.0/widget/reg-steps/i/x.png) no-repeat;
    background-size: 13px 13px
  }

  .JDJRV-slide {
    z-index: 55
  }

  .slide-authCode-wraper {
    display: none;
    line-height: 1.5;
    text-align: left;
    position: absolute;
    left: 0;
    bottom: 65px;
    font-family: "Microsoft YaHei";
    background-color: #fff;
    cursor: default;
    z-index: 110;
    box-shadow: 0 0 2px 2px #eee;
    border: 1px solid #eee;
    width: 364px;
    height: 216.5px;
    padding: 12px 12px 12px 20px
  }

  .slide-authCode-wraper .arrow {
    display: block;
    position: absolute;
    background-image: url(//misc.360buyimg.com/user/reg/1.0.0/widget/foreign-number-layer-170524/i/tips.gif);
    background-repeat: no-repeat;
    width: 16px;
    height: 8px;
    background-position: 0 -8px;
    overflow: hidden;
    bottom: -8px;
    left: 190px
  }

  .slide-authCode-wraper .close {
    cursor: pointer;
    z-index: 100;
    position: absolute;
    right: 10px;
    top: 10px;
    display: block;
    width: 12px;
    height: 12px;
    background-image: url(//misc.360buyimg.com/user/reg/1.0.0/widget/personal-reg-1130/i/x.png)
  }

  #step2-wrap { /* display:none */
  }

  #step2-wrap .form-item:hover {
    border: 1px solid #999
  }

  #step2-wrap .form-item:focus {
    border-color: rgb(102, 102, 102);
  }

  #step2-wrap .form-item-mailcode:hover {
    border: none
  }

  .back-btn {
    text-align: center;
    font-size: 14px
  }

  .back-btn:active, .back-btn:hover {
    color: #c81623;
    text-decoration: underline;
    cursor: pointer
  }

  .back-btn:active {
    opacity: .6
  }

  .blue-btn {
    color: #06c;
    cursor: pointer
  }

  .blue-btn:hover {
    text-decoration: underline
  }

  /* foreign-number-layer-170524.css Date:2018-07-23 18:59:01 */
  #country_code_layer {
    font-family: "Microsoft YaHei";
    display: none;
    background-color: #fff;
    position: absolute;
    cursor: default;
    z-index: 110;
    box-shadow: 0 0 2px 2px #eee;
    border: 1px solid #eee;
    padding: 10px 14px;
    width: 316px;
    height: auto
  }

  #country_code_layer a {
    text-decoration: none
  }

  #country_code_layer .close-button {
    right: 4px;
    top: 5px;
    position: absolute;
    background: url(//misc.360buyimg.com/user/reg/3.0.0/widget/foreign-number-layer-170524/i/close-button.png) no-repeat;
    width: 17px;
    height: 17px
  }

  #country_code_layer .arrow {
    display: block;
    position: absolute;
    background-image: url(//misc.360buyimg.com/user/reg/3.0.0/widget/foreign-number-layer-170524/i/tips.gif);
    background-repeat: no-repeat;
    width: 16px;
    height: 9px;
    background-position: 0 0;
    overflow: hidden;
    top: -9px;
    right: 270px
  }

  #country_code_layer a:hover {
    color: #C81623
  }

  #country_code_layer .search-bar {
    width: auto;
    height: auto;
    position: relative;
    background: #f7f7f7;
    margin-bottom: 12px
  }

  #country_code_layer .search-bar input {
    display: inline-block;
    *display: inline;
    width: 272px;
    height: 38px;
    line-height: 38px;
    background: #f7f7f7;
    border: 1px solid #eee;
    padding-left: 42px
  }

  #country_code_layer .search-bar .search-icon {
    display: inline-block;
    width: 17px;
    height: 16px;
    background: url(//misc.360buyimg.com/user/reg/3.0.0/css/i/search-icon.png) no-repeat;
    position: absolute;
    left: 17px;
    top: 13px
  }

  #country_code_layer .capital-list {
    line-height: 20px
  }

  #country_code_layer .capital-list ul {
    width: 330px;
    word-break: break-all
  }

  #country_code_layer .capital-list ul li {
    display: inline-block;
    *display: inline;
    margin-right: 10px
  }

  #country_code_layer .capital-list .cur {
    color: #e4393c
  }

  #country_code_layer .current-capital span {
    display: inline-block
  }

  #country_code_layer .current-capital .line {
    width: 289px;
    height: 1px;
    margin-left: 12px;
    background: #eee;
    vertical-align: middle
  }

  #country_code_layer .current-capital .line-short {
    width: 210px
  }

  #country_code_layer .country-list {
    height: 160px;
    width: 100%
  }

  #country_code_layer .country-list .overview {
    width: 100%
  }

  #country_code_layer .country-list ul li {
    float: left;
    width: 95%;
    cursor: pointer;
    margin-bottom: 15px
  }

  #country_code_layer .country-list ul li i {
    display: inline-block;
    float: left;
    vertical-align: middle;
    height: 12px;
    width: 19px;
    background-size: 19px 12px;
    background-repeat: no-repeat;
    margin-right: 14px;
    margin-top: 3px
  }

  #country_code_layer .country-list ul li .flr {
    margin-right: 5px;
    float: right
  }

  #country_code_layer .country-list ul li span {
    display: inline-block;
    *display: inline;
    float: left;
    vertical-align: middle
  }

  #country_code_layer .country-list ul li:last-of-type {
    margin-bottom: 0
  }

  .flr {
    float: right
  }

  #no-result, #result {
    display: none;
    clear: both
  }

  /* footer.css Date:2018-04-24 21:00:13 */
  .footer {
    font-size: 12px;
    text-align: center;
    border-top: solid 1px #e6e6e6;
    color: #999;
    padding-bottom: 30px
  }

  .footer .links {
    padding-top: 30px;
    padding-bottom: 15px
  }

  .footer p {
    color: #bbb
  }

  .footer a {
    color: #999;
    margin: 0 10px
  }

  .footer a:hover {
    text-decoration: underline
  }

  .show-error {
    border: 1px solid #f91
  }

}

#header {
  min-width: 1210px;
  margin: 0 auto;
  text-align: center;
}

#header {
  position: relative;
  z-index: 2;
  height: 90px;
  background: url(../../assets/images/headerBg.png) left top repeat;
}

#header .topBar {
  position: relative;
  z-index: 1;
  height: 90px;
  width: 1210px;
  margin: 0 auto;
  text-align: left;

}

#header h1.logo {
  width: 100%;
  float: left;
  margin: 10px 0 0 0px;
  display: inline;
}

#header h1.logo a {
  display: block;
  float: left;
}

#header h1.logo img {
}

.logo-title {
  float: left;
  height: 80px;
  line-height: 90px;
  font-size: 24px;
  color: #fff;
  margin-left: 25px;
}

.have-account {
  font-weight: 500;
  font-size: 16px;
  float: right;
  margin-top: 40px;
  color: #f6f5ec;

  a {
    margin-left: 4px;
    text-decoration: none;
    color: #f15b6c;
    float: right;
  }

  a:hover {
    color: #ef5b9c;
    text-decoration: underline
  }
}
</style>
